<template>
  <div class="working-calendar-page">
    <el-card class="filter-card">
      <el-form :inline="true" :model="searchForm" label-width="120">
        <el-form-item label="工作日历名称">
          <el-input
            v-model="searchForm.calendarname"
            placeholder="请输入工作日历名称"
            clearable
            style="width: 220px"
          />
        </el-form-item>
        <el-form-item label="日历类型">
          <el-select
            v-model="searchForm.calendartype"
            placeholder="请选择日历类型"
            clearable
            style="width: 200px"
          >
            <el-option label="周" value="周" />
            <el-option label="月" value="月" />
            <el-option label="无固定休息日" value="无固定休息日" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card">
      <div class="table-toolbar">
        <h2>工作日历</h2>
        <div>
          <el-button type="primary" @click="openCreateDialog">新增</el-button>
          <el-button
            type="danger"
            :disabled="!selectedIds.length"
            @click="handleBatchDelete"
          >
            删除
          </el-button>
        </div>
      </div>

      <el-table
        v-loading="loading"
        :data="tableData"
        border
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="calendarname" label="日历名称" min-width="180">
          <template #default="{ row }">
            <span>{{ row.calendarname }}</span>
            <el-tag v-if="row.isdefault" type="warning" size="small" style="margin-left: 8px">
              默认
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="calendartype" label="工作日历类型" min-width="140" />
        <el-table-column label="同步节假日安排" min-width="140">
          <template #default="{ row }">
            {{ row.syncholiday ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="openEditDialog(row)">
              编辑
            </el-button>
            <el-button link type="primary" @click="openSettingsDialog(row)">
              设置
            </el-button>
            <el-button
              v-if="!row.isdefault"
              link
              type="danger"
              @click="handleDelete(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-wrapper">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.totalCount"
          :page-size="pagination.pagesize"
          :current-page="pagination.pageindex"
          :page-sizes="[10, 20, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="800px"
      :close-on-click-modal="false"
      @close="handleDialogClose"
    >
      <el-form
        ref="dialogFormRef"
        :model="dialogForm"
        :rules="dialogRules"
        label-width="140px"
      >
        <div class="form-section-header">
          <span>基础信息</span>
        </div>

        <el-form-item label="工作日历名称" prop="calendarname">
          <div style="display: flex; align-items: center; gap: 12px; width: 100%">
            <el-input
              v-model="dialogForm.calendarname"
              placeholder="请输入"
              style="flex: 1"
            />
            <el-switch
              v-model="dialogForm.isdefault"
              active-text="设为默认"
              inactive-text=""
            />
          </div>
        </el-form-item>

        <el-form-item label="工作日历类型" prop="calendartype">
          <el-radio-group v-model="dialogForm.calendartype" @change="handleCalendarTypeChange">
            <el-radio value="周">周</el-radio>
            <el-radio value="月">月</el-radio>
            <el-radio value="无固定休息日">无固定休息日</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 周类型配置 -->
        <template v-if="dialogForm.calendartype === '周'">
          <el-form-item
            v-for="day in weekDays"
            :key="day.key"
            :label="day.label"
          >
            <el-radio-group :model-value="(dialogForm as any)[day.key]" @update:model-value="(val: string) => (dialogForm as any)[day.key] = val">
              <el-radio value="工作日">工作日</el-radio>
              <el-radio value="休息日">休息日</el-radio>
            </el-radio-group>
          </el-form-item>
        </template>

        <el-form-item label="遇法定节假日自动排休">
          <el-switch v-model="dialogForm.syncholiday" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="saving" @click="handleSubmit">
          确定
        </el-button>
      </template>
    </el-dialog>

    <el-dialog
      v-model="settingsDialogVisible"
      title="设置工作日历"
      width="1000px"
      :close-on-click-modal="false"
      @close="handleSettingsClose"
    >
      <div class="settings-dialog-body" v-loading="settingsLoading">
        <template v-if="settingsCalendar">
          <el-tabs v-model="settingsActiveTab" type="border-card">
            <el-tab-pane label="基础信息" name="basic">
              <div class="settings-basic">
                <div class="basic-row">
                  <span class="basic-label">工作日历名称</span>
                  <span class="basic-value">{{ settingsCalendar.calendarname }}</span>
                </div>
                <div class="basic-row">
                  <span class="basic-label">工作日历类型</span>
                  <span class="basic-value">{{ settingsCalendar.calendartype }}</span>
                </div>
                <div class="basic-row">
                  <span class="basic-label">同步节假日安排</span>
                  <span class="basic-value">{{ settingsCalendar.syncholiday ? '是' : '否' }}</span>
                </div>
                <div class="basic-row">
                  <span class="basic-label">设为默认</span>
                  <span class="basic-value">{{ settingsCalendar.isdefault ? '是' : '否' }}</span>
                </div>

                <div class="basic-week-status">
                  <div
                    v-for="day in weekDays"
                    :key="day.key"
                    class="week-status-item"
                  >
                    <span>{{ day.label }}</span>
                    <el-tag
                      size="small"
                      :type="(settingsCalendar as any)[day.key] === '工作日' ? 'primary' : 'success'"
                    >
                      {{ formatStatusText((settingsCalendar as any)[day.key]) }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="日期设置" name="date">
              <div v-if="supportsDateSettings" class="calendar-section">
                <div class="calendar-toolbar">
                  <el-select v-model="calendarYear" style="width: 120px">
                    <el-option
                      v-for="year in yearOptions"
                      :key="year"
                      :label="`${year}年`"
                      :value="year"
                    />
                  </el-select>
                  <el-select v-model="calendarMonth" style="width: 100px">
                    <el-option
                      v-for="month in monthOptions"
                      :key="month"
                      :label="`${month}月`"
                      :value="month"
                    />
                  </el-select>
                </div>
                <div class="calendar-grid">
                  <div class="calendar-header">
                    <div v-for="header in weekdayHeaders" :key="header" class="calendar-header-cell">
                      {{ header }}
                    </div>
                  </div>
                  <div class="calendar-body">
                    <div v-for="(week, index) in calendarMatrix" :key="index" class="calendar-row">
                      <div
                        v-for="(day, idx) in week"
                        :key="idx"
                        class="calendar-cell"
                      >
                        <template v-if="day">
                          <div class="calendar-date">{{ day.day }}</div>
                          <span :class="['status-tag', getStatusTagClass(day.status)]">
                            {{ getStatusTagText(day.status) }}
                          </span>
                        </template>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <el-empty v-else description="仅周类型支持日期预览" />
            </el-tab-pane>
          </el-tabs>
        </template>
        <el-empty v-else-if="!settingsLoading" description="暂无数据" />
      </div>
      <template #footer>
        <el-button @click="settingsDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import https from '@/Http/http'
import dayjs from 'dayjs'

interface WorkingCalendar {
  id: number
  calendarname: string
  isdefault: boolean
  calendartype: string
  syncholiday: boolean
  mondaystatus?: string
  tuesdaystatus?: string
  wednesdaystatus?: string
  thursdaystatus?: string
  fridaystatus?: string
  saturdaystatus?: string
  sundaystatus?: string
}


const loading = ref(false)
const saving = ref(false)
const tableData = ref<WorkingCalendar[]>([])
const multipleSelection = ref<WorkingCalendar[]>([])

const pagination = reactive({
  pageindex: 1,
  pagesize: 10,
  totalCount: 0
})

const searchForm = reactive({
  calendarname: '',
  calendartype: ''
})

const dialogVisible = ref(false)
const dialogTitle = ref('新增工作日历')
const dialogMode = ref<'create' | 'edit'>('create')
const dialogFormRef = ref<FormInstance>()
const dialogForm = reactive<{
  id: number
  calendarname: string
  isdefault: boolean
  calendartype: string
  syncholiday: boolean
  mondaystatus?: string
  tuesdaystatus?: string
  wednesdaystatus?: string
  thursdaystatus?: string
  fridaystatus?: string
  saturdaystatus?: string
  sundaystatus?: string
}>({
  id: 0,
  calendarname: '',
  isdefault: false,
  calendartype: '周',
  syncholiday: true,
  mondaystatus: '工作日',
  tuesdaystatus: '工作日',
  wednesdaystatus: '工作日',
  thursdaystatus: '工作日',
  fridaystatus: '工作日',
  saturdaystatus: '休息日',
  sundaystatus: '休息日'
})

const weekDays = [
  { key: 'mondaystatus', label: '星期一' },
  { key: 'tuesdaystatus', label: '星期二' },
  { key: 'wednesdaystatus', label: '星期三' },
  { key: 'thursdaystatus', label: '星期四' },
  { key: 'fridaystatus', label: '星期五' },
  { key: 'saturdaystatus', label: '星期六' },
  { key: 'sundaystatus', label: '星期日' }
]

const settingsDialogVisible = ref(false)
const settingsActiveTab = ref<'basic' | 'date'>('basic')
const settingsLoading = ref(false)
const settingsCalendar = ref<WorkingCalendar | null>(null)
const currentYear = dayjs().year()
const calendarYear = ref(currentYear)
const calendarMonth = ref(dayjs().month() + 1)
const yearOptions = Array.from({ length: 10 }, (_, idx) => currentYear - 5 + idx)
const monthOptions = Array.from({ length: 12 }, (_, idx) => idx + 1)
const weekdayHeaders = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

const dialogRules: FormRules = {
  calendarname: [{ required: true, message: '请输入工作日历名称', trigger: 'blur' }],
  calendartype: [{ required: true, message: '请选择工作日历类型', trigger: 'change' }]
}

const selectedIds = computed(() => multipleSelection.value.map(item => item.id))

const getStatusCode = (payload: any) => payload?.code ?? payload?.Code
const getPayloadData = <T = any>(payload: any): T =>
  (payload?.data ?? payload?.Data) as T
const getPayloadMsg = (payload: any): string =>
  payload?.msg ?? payload?.Msg ?? ''
const getTotalCount = (payload: any) =>
  payload?.totalCount ?? payload?.TotalCount ?? 0

const supportsDateSettings = computed(() => settingsCalendar.value?.calendartype === '周')

const weekStatusMap = computed(() => {
  if (!settingsCalendar.value) return {}
  return {
    0: settingsCalendar.value.sundaystatus || '休息日',
    1: settingsCalendar.value.mondaystatus || '工作日',
    2: settingsCalendar.value.tuesdaystatus || '工作日',
    3: settingsCalendar.value.wednesdaystatus || '工作日',
    4: settingsCalendar.value.thursdaystatus || '工作日',
    5: settingsCalendar.value.fridaystatus || '工作日',
    6: settingsCalendar.value.saturdaystatus || '休息日'
  }
})

const calendarMatrix = computed(() => {
  if (!supportsDateSettings.value) return []
  const daysInMonth = dayjs(`${calendarYear.value}-${calendarMonth.value}-01`).daysInMonth()
  const firstDayOfWeek = dayjs(`${calendarYear.value}-${calendarMonth.value}-01`).day()
  const cells: Array<{ day: number; status: string; weekday: number } | null> = []

  for (let i = 0; i < firstDayOfWeek; i++) {
    cells.push(null)
  }

  for (let day = 1; day <= daysInMonth; day += 1) {
    const date = dayjs(`${calendarYear.value}-${calendarMonth.value}-${day}`)
    const weekday = date.day()
    const status = weekStatusMap.value[weekday] || '工作日'
    cells.push({ day, status, weekday })
  }

  while (cells.length % 7 !== 0) {
    cells.push(null)
  }

  const rows: typeof cells[] = []
  for (let i = 0; i < cells.length; i += 7) {
    rows.push(cells.slice(i, i + 7))
  }
  return rows
})

const fetchWorkingCalendars = async () => {
  loading.value = true
  try {
    const params = {
      pageindex: pagination.pageindex,
      pagesize: pagination.pagesize,
      calendarname: searchForm.calendarname || undefined,
      calendartype: searchForm.calendartype || undefined
    }
    const { data } = await https.Reads.get("/Working/ShowWorkingCalendar", { params })
    if (getStatusCode(data) === 1) {
      tableData.value = getPayloadData<WorkingCalendar[]>(data) ?? []
      pagination.totalCount = getTotalCount(data)
    } else {
      ElMessage.error(getPayloadMsg(data) || '获取工作日历失败')
    }
  } catch (error: any) {
    console.error('fetchWorkingCalendars error', error)
    ElMessage.error(error?.message || '获取工作日历失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  pagination.pageindex = 1
  fetchWorkingCalendars()
}

const handleReset = () => {
  searchForm.calendarname = ''
  searchForm.calendartype = ''
  pagination.pageindex = 1
  fetchWorkingCalendars()
}

const handleSizeChange = (val: number) => {
  pagination.pagesize = val
  pagination.pageindex = 1
  fetchWorkingCalendars()
}

const handlePageChange = (val: number) => {
  pagination.pageindex = val
  fetchWorkingCalendars()
}

const handleSelectionChange = (rows: WorkingCalendar[]) => {
  multipleSelection.value = rows
}

const handleCalendarTypeChange = (value: string) => {
  // 当类型改变时，如果不是周类型，清空周几的状态
  if (value !== '周') {
    dialogForm.mondaystatus = undefined
    dialogForm.tuesdaystatus = undefined
    dialogForm.wednesdaystatus = undefined
    dialogForm.thursdaystatus = undefined
    dialogForm.fridaystatus = undefined
    dialogForm.saturdaystatus = undefined
    dialogForm.sundaystatus = undefined
  } else {
    // 如果是周类型，设置默认值
    dialogForm.mondaystatus = '工作日'
    dialogForm.tuesdaystatus = '工作日'
    dialogForm.wednesdaystatus = '工作日'
    dialogForm.thursdaystatus = '工作日'
    dialogForm.fridaystatus = '工作日'
    dialogForm.saturdaystatus = '休息日'
    dialogForm.sundaystatus = '休息日'
  }
}

const resetDialogForm = () => {
  dialogForm.id = 0
  dialogForm.calendarname = ''
  dialogForm.isdefault = false
  dialogForm.calendartype = '周'
  dialogForm.syncholiday = true
  dialogForm.mondaystatus = '工作日'
  dialogForm.tuesdaystatus = '工作日'
  dialogForm.wednesdaystatus = '工作日'
  dialogForm.thursdaystatus = '工作日'
  dialogForm.fridaystatus = '工作日'
  dialogForm.saturdaystatus = '休息日'
  dialogForm.sundaystatus = '休息日'
  dialogFormRef.value?.clearValidate()
}

const openCreateDialog = () => {
  dialogMode.value = 'create'
  dialogTitle.value = '新增工作日历'
  resetDialogForm()
  dialogVisible.value = true
}

const openEditDialog = (row: WorkingCalendar) => {
  dialogMode.value = 'edit'
  dialogTitle.value = '编辑工作日历'
  dialogForm.id = row.id
  dialogForm.calendarname = row.calendarname
  dialogForm.isdefault = row.isdefault
  dialogForm.calendartype = row.calendartype
  dialogForm.syncholiday = row.syncholiday
  dialogForm.mondaystatus = row.mondaystatus || undefined
  dialogForm.tuesdaystatus = row.tuesdaystatus || undefined
  dialogForm.wednesdaystatus = row.wednesdaystatus || undefined
  dialogForm.thursdaystatus = row.thursdaystatus || undefined
  dialogForm.fridaystatus = row.fridaystatus || undefined
  dialogForm.saturdaystatus = row.saturdaystatus || undefined
  dialogForm.sundaystatus = row.sundaystatus || undefined
  dialogVisible.value = true
}

const mapCalendarDetail = (detail: any): WorkingCalendar => ({
  id: detail?.id ?? 0,
  calendarname: detail?.calendarname ?? detail?.Calendarname ?? '',
  isdefault: detail?.isdefault ?? detail?.Isdefault ?? false,
  calendartype: detail?.calendartype ?? detail?.Calendartype ?? '周',
  syncholiday: detail?.syncholiday ?? detail?.Syncholiday ?? true,
  mondaystatus: detail?.mondaystatus ?? detail?.Mondaystatus ?? '工作日',
  tuesdaystatus: detail?.tuesdaystatus ?? detail?.Tuesdaystatus ?? '工作日',
  wednesdaystatus: detail?.wednesdaystatus ?? detail?.Wednesdaystatus ?? '工作日',
  thursdaystatus: detail?.thursdaystatus ?? detail?.Thursdaystatus ?? '工作日',
  fridaystatus: detail?.fridaystatus ?? detail?.Fridaystatus ?? '工作日',
  saturdaystatus: detail?.saturdaystatus ?? detail?.Saturdaystatus ?? '休息日',
  sundaystatus: detail?.sundaystatus ?? detail?.Sundaystatus ?? '休息日'
})

const openSettingsDialog = async (row: WorkingCalendar) => {
  settingsActiveTab.value = 'basic'
  settingsDialogVisible.value = true
  settingsCalendar.value = null
  calendarYear.value = currentYear
  calendarMonth.value = dayjs().month() + 1
  await fetchCalendarDetail(row.id)
}

const fetchCalendarDetail = async (id: number) => {
  settingsLoading.value = true
  try {
    const { data } = await https.Reads.get("/Working/GetCalendar", {
      params: { id }
    })
    if (getStatusCode(data) === 1) {
      settingsCalendar.value = mapCalendarDetail(getPayloadData(data))
    } else {
      ElMessage.error(getPayloadMsg(data) || '获取日历详情失败')
      settingsDialogVisible.value = false
    }
  } catch (error: any) {
    console.error('fetchCalendarDetail error', error)
    ElMessage.error(error?.message || '获取日历详情失败，请稍后重试')
    settingsDialogVisible.value = false
  } finally {
    settingsLoading.value = false
  }
}

const handleSettingsClose = () => {
  settingsDialogVisible.value = false
  settingsCalendar.value = null
}

const handleSubmit = async () => {
  if (!dialogFormRef.value) return

  await dialogFormRef.value.validate(async (valid) => {
    if (!valid) return

    saving.value = true
    try {
      const payload: any = {
        calendarname: dialogForm.calendarname,
        isdefault: dialogForm.isdefault,
        calendartype: dialogForm.calendartype,
        syncholiday: dialogForm.syncholiday
      }

      // 只有周类型才需要周几的状态
      if (dialogForm.calendartype === '周') {
        payload.mondaystatus = dialogForm.mondaystatus
        payload.tuesdaystatus = dialogForm.tuesdaystatus
        payload.wednesdaystatus = dialogForm.wednesdaystatus
        payload.thursdaystatus = dialogForm.thursdaystatus
        payload.fridaystatus = dialogForm.fridaystatus
        payload.saturdaystatus = dialogForm.saturdaystatus
        payload.sundaystatus = dialogForm.sundaystatus
      }

      let response
      if (dialogMode.value === 'create') {
        response = await https.Writes.post("/WorkingCalendar/AddWorkingCalendar", payload)
      } else {
        payload.id = dialogForm.id
        response = await https.Writes.put("/WorkingCalendar/UpdateWorkingCalendar", payload)
      }

      const { data } = response
      if (getStatusCode(data) === 1) {
        ElMessage.success(getPayloadMsg(data) || '操作成功')
        dialogVisible.value = false
        fetchWorkingCalendars()
      } else {
        ElMessage.error(getPayloadMsg(data) || '操作失败')
      }
    } catch (error: any) {
      console.error('submit error', error)
      ElMessage.error(error?.message || '操作失败，请稍后重试')
    } finally {
      saving.value = false
    }
  })
}

const handleDelete = async (row: WorkingCalendar) => {
  try {
    await ElMessageBox.confirm('确定要删除该工作日历吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    const { data } = await https.Writes.delete("/WorkingCalendar/DelAllWorkingCalendar", {
      data: { ids: [row.id] }
    })

    if (getStatusCode(data) === 1) {
      ElMessage.success(getPayloadMsg(data) || '删除成功')
      fetchWorkingCalendars()
    } else {
      ElMessage.error(getPayloadMsg(data) || '删除失败')
    }
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('delete error', error)
      ElMessage.error(error?.message || '删除失败，请稍后重试')
    }
  }
}

const handleBatchDelete = async () => {
  if (selectedIds.value.length === 0) {
    ElMessage.warning('请选择要删除的数据')
    return
  }

  try {
    await ElMessageBox.confirm(`确定要删除选中的 ${selectedIds.value.length} 条数据吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    const { data } = await https.Writes.delete("/WorkingCalendar/DelAllWorkingCalendar", {
      data: { ids: selectedIds.value }
    })

    if (getStatusCode(data) === 1) {
      ElMessage.success(getPayloadMsg(data) || '删除成功')
      fetchWorkingCalendars()
    } else {
      ElMessage.error(getPayloadMsg(data) || '删除失败')
    }
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('batch delete error', error)
      ElMessage.error(error?.message || '删除失败，请稍后重试')
    }
  }
}

const handleDialogClose = () => {
  resetDialogForm()
}

const getStatusTagClass = (status?: string) => {
  return status === '工作日' ? 'status-work' : 'status-rest'
}

const getStatusTagText = (status?: string) => {
  return status === '工作日' ? '班' : '休'
}

const formatStatusText = (status?: string) => status || '-'

onMounted(() => {
  fetchWorkingCalendars()
})
</script>

<style scoped lang="scss">
.working-calendar-page {
  padding: 20px;

  .filter-card {
    margin-bottom: 20px;
  }

  .table-card {
    .table-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 500;
      }
    }

    .pagination-wrapper {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }

  .form-section-header {
    text-align: center;
    margin-bottom: 20px;
    padding: 8px 0;
    border: 1px solid #d9ecff;
    border-radius: 4px;
    background-color: #ecf5ff;
    color: #409eff;
    font-weight: 500;
  }

  .settings-dialog-body {
    min-height: 300px;
  }

  .settings-basic {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .basic-row {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #f0f2f5;
      padding-bottom: 6px;

      .basic-label {
        color: #909399;
      }

      .basic-value {
        font-weight: 500;
      }
    }

    .basic-week-status {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;

      .week-status-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        border: 1px solid #ebeef5;
        border-radius: 4px;
      }
    }
  }

  .calendar-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .calendar-toolbar {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
  }

  .calendar-grid {
    border: 1px solid #ebeef5;
    border-radius: 4px;

    .calendar-header,
    .calendar-row {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
    }

    .calendar-header {
      background-color: #f5f7fa;
      border-bottom: 1px solid #ebeef5;
    }

    .calendar-header-cell {
      text-align: center;
      padding: 10px 0;
      font-weight: 500;
      color: #606266;
    }

    .calendar-cell {
      min-height: 70px;
      border-right: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding-top: 6px;
      position: relative;

      &:nth-child(7n) {
        border-right: none;
      }
    }

    .calendar-row:last-child .calendar-cell {
      border-bottom: none;
    }

    .calendar-date {
      font-size: 14px;
      font-weight: 600;
      color: #303133;
    }
  }

  .status-tag {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 24px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;

    &.status-work {
      background-color: #409eff;
    }

    &.status-rest {
      background-color: #67c23a;
    }
  }
}
</style>

